Customize Click-to-Call widgets
You can customize the appearance of the Click-to-Call widget, using CSS or JavaScript, as shown in the examples below.
Customize the background
To change the background of the Click-to-Call component, use the following CSS:
click-to-call::part(click-body) {
background: url('./ac-bg.png');
height: 100vh;
}
Customize the button
To customize the button style, add a custom <style> tag inside the script.
<script>
document.addEventListener("readystatechange", () => {
const shadowHost = document.getElementById("click2call");
const shadowRoot = shadowHost.shadowRoot;
if (shadowRoot) {
const style = document.createElement("style");
style.textContent = `
.click-to-call-body-frame #c2c_call_btn {
background: linear-gradient(90deg, #195993 0%, #28C7DE 100%);
border-radius: 60px;
height: 33px;
border-width: 0;
font: 12px "Poppins", sans-serif !important;
}
`;
shadowRoot.appendChild(style);
}
});
</script>
Full Code Snippet
You can fully customize the Click-to-Call interface, as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click-to-Call Custom Styling</title>
<!-- Click-to-Call SDK -->
<script src="./click-to-call.js" type="module" defer async></script>
<!-- External Style -->
<style>
click-to-call::part(click-body) {
background: url('./ac-bg.png');
height: 100vh;
}
</style>
</head>
<body>
<!-- Click-to-Call Component -->
<click-to-call id="click2call"
form='{"isValid": true}'
config='{"c2c_config":{"caller":"<REPLACE_USER>","password":"<REPLACE_PASSWORD>","callerPhone":"REPLACE_CALLER","call":"<REPLACE_CALL>","dtmfKeypadEnabled":true,"keepConnectionAfterCall":0},"c2c_serverConfig":{"domain":"<REPLACE_DOMAIN>","addresses":["wss://<REPLACE_DOMAIN>"]}}'>
</click-to-call>
<!-- Attach Custom Styles -->
<script>
document.addEventListener("readystatechange", () => {
const shadowHost = document.getElementById("click2call");
const shadowRoot = shadowHost.shadowRoot;
if (shadowRoot) {
const style = document.createElement("style");
style.textContent = `
.click-to-call-body-frame #c2c_call_btn {
background: linear-gradient(90deg, #195993 0%, #28C7DE 100%);
border-radius: 60px;
height: 33px;
border-width: 0;
font: 12px "Poppins", sans-serif !important;
}
`;
shadowRoot.appendChild(style);
}
});
</script>
</body>
</html>